<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>复选框的绑定</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
		<style>
			body {
				display: flex;
				flex-direction: column;
				align-items: center;
				background-color: #bfa;
			}

			li {
				width: 100px;
				height: 48px;
				line-height: 48px;
				text-align: center;
				color: #333;
				margin-bottom: 5px;
				background-color: antiquewhite;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<input type="checkbox" value="huawei" v-model="selectphone">华为
			<br><input type="checkbox" value="apple" v-model="selectphone">苹果
			<br><input type="checkbox" value="xiaomi" v-model="selectphone">小米
			<br><input type="checkbox" value="vivo" v-model="selectphone">vivo
			<br><input type="checkbox" value="honor" v-model="selectphone">honor
			<br><input type="checkbox" value="oppo" v-model="selectphone">oppo
			<br>
			你的选择是：<ul>
				<li v-for="(item,index) in selectphone" :key="index">{{item}}</li>
			</ul>
		</div>
		    
		<script>
			var exam = new Vue({
				el: "#app",
				data: {
					selectphone: []
				}
			})
		</script>    
	</body>
</html>
